<template>
	<view class="app listorder" style="padding-bottom: 60px;">
		
		<view class="search flex justify-start items-end">
			<view class="type">
				<picker @change="changeSerch" :value="search.currentType" :range="search.type" range-key="title">
					<text>{{search.type[search.currentType].title}}</text>
				</picker>
			</view>
			
			<view class="flex justify-end items-center flex_1" style="flex: 1;">
				<view class="info flex justify-between items-center" v-if="search.currentType!=0">
					<view class="ipt"><input :placeholder="search.type[search.currentType].desc" v-model="search.key" placeholder-class="ipt2" /></view>
					<view class="btn" @click.stop="loadlist">查询</view>
				</view>
				<view class="fresh" @click.stop="loadlist">刷新</view>
			</view>

			
		</view>
		
		<scroll-view ref="list" class="list" scroll-y>
			
			<view class="nodata" v-if="!list.total">无数据</view>
			
			<view class="panel" v-for="(item,index) in list.data" @click.stop="showOrder('popup',item.order_sn)">
				<view class="flex justify-between items-center head">
					<view @click.stop="toCopy(item.order_sn)">{{item.order_sn}}</view>
					<view>{{item.shopname}}</view>
				</view>
				<view class="flex justify-between items-center techinfo">
					<view class="flex justify-start items-center">
						<view class="avatar"><image :src="item.avatar" mode="widthFix"></image></view>
						<view class="techname">
							{{item.techname}}
						</view>
					</view>
					<view class="flex-fol userinfo">
						<view class="realname flex justify-end items-center">
							<view class="avatar"><image :src="item.useravatar" mode="widthFix"></image></view>
							<view>{{item.username}}</view>
						</view>
					</view>
				</view>
				<view class="flex justify-between itmes-center service">
					<view class="sname">
						{{item.sname}}
					</view>
					<view class="atime">
						下单时间:<text>{{item.create_time*1000|formatDate}}</text>
					</view>
				</view>
				<view class="flex justify-between itmes-center viewctr">
					<view><text :class="'status status'+item.order_status">{{item.order_status|orderStatusTxt}}</text></view>
					<view>详情</view>
				</view>
			</view>
		</scroll-view>
		
		

		
		<view class="page playctr orderlistpage">
			<view class="page-item">
				<wyb-pagination :total-items="list.total" :page-items="list.per_page" :current="list.current_page" :show-total-item="true" :show-icon="true" @change="loadlist"/>
			</view>
		</view>
		
		<uni-popup ref="popup" type="bottom" :animation="true">
			<orderinfo :order_sn="order_sn"></orderinfo>
		</uni-popup>
	</view>
</template>

<script>
	var that,App=getApp(),Comm=getApp().comm;
	import orderinfo from '@/components/orderinfo/index.vue';
	
	export default {
		data() {
			return {
				search:{
					type:[
						{key:'all',title:'全部',desc:''},
						{key:'order',title:'订单',desc:'请输入订单ID或订单号'},
						{key:'user',title:'用户',desc:'请输入用户ID、手机或姓名'},
						{key:'tech',title:'技师',desc:'请输入技师ID、手机或姓名'},
					],
					currentType:0,
					key:''
				},
				list:{},
				scrollTop:0,
				order_sn:'',
			}
		},
		components:{
			orderinfo
		},
		onLoad() {
			that=this;
			that.loadlist();
		},
		methods: {
			changeSerch(e){
				let v=e.detail.value;
				if(this.search.currentType==v)
					return;
					
				this.search.currentType=v;
				this.search.key='';
				if(v==0){
					this.loadlist();
				}
			},
			loadlist(page={current:1}){
				if(!(/^./.test(this.search.key)) && this.search.currentType!=0){
					uni.showToast({
						title:'搜索关键字不能为空',icon:'none'
					});
					return;
				}
				let _page=page.current;
				Comm.http('/api/service/listorder',{search_type:this.search.type[this.search.currentType].key,search_key:this.search.key,page:_page},'POST').then(res=>{
					if(res.code==1){
						that.list=res.data;
					}else{
						uni.showToast({
							icon:'none',
							title:res.msg
						});
					}
				});
			},
			toCopy(e){
				Comm.copy(e);
			},
			showOrder(action,orderid){
				this.order_sn=orderid;
				this.$refs[action].open();
			},
			onPullDownRefresh(){
				this.loadlist();
				uni.stopPullDownRefresh();
			}
		}
	}
</script>

<style lang="scss">

	.listorder{
		.search{
			padding: 0 8px;
			height: 45px;
			.type{
				padding: 0 16px; border-bottom: 1px solid #9f9f9f;
				height: 35px; line-height: 35px;
			}
			.info{
				flex: 1;
				
				.ipt{
					flex: 1;
					margin: 0 8px;
					background-color: #efefef; border-radius:5px;
					padding: 0px 16px;
					border-bottom: 1px solid #d7d7d7;
				}
				.ipt>input{
					height: 35px;
				}
				.ipt2{
					font-size: 12px;
				}
				.btn{
					margin-left: 8px;
					color: #fff;
					background-color: #2d8cf0;
					border-color: #2d8cf0;
					border-radius: 10px;
					padding: 0 16px;
					height: 35px; line-height: 35px;
					cursor:pointer;
				}
			}
		}
		.list{
			margin-top: 8px;
			height: calc(100vh - 158px);
		}
		.head{
			padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid #f0f0f0;
		}
		.avatar{
			height: 32px; width: 32px; border-radius: 50%; overflow: hidden; margin-right: 5px;
		}
		.avatar image{
			width: 100%; height: 100%;
		}
		.techname{
			font-size: 13px;
			text{
				font-size: 12px; color: #999; margin-left: 5px;
			}
		}
		.techmobile{
			font-size: 12px; padding: 5px 0;
			text{
				color: #999; margin-left: 5px;
			}
		}
		.userinfo{
			text-align: right;
			font-size: 13px;
			.time{
				color: #999; font-size: 12px;
			}
		}
		.service{
			padding: 8px 0;
			.sname{font-size: 13px;}
			.atime{
				font-size: 12px;
				text{
					color: #999; margin-left: 5px;
				}
			}
		}
		.viewctr{
			padding-top: 8px;
		}
		.orderlistpage{
			max-width: 640px;
			left: 50%;
			transform: translateX(-50%);
		}
		.fresh{
			margin-left: 18px; color: #2d8cf0; cursor:pointer;
		}
	}
	
</style>
